<div class="field-wrapper space-occupying" #richText>
    <div style="display: flex; align-items: flex-start;align-self: flex-start;"
        *ngIf="!componentData.extends?.noLabelTxt">
        <label class="label" nz-tooltip
            [nzTooltipTitle]="(componentData && componentData.labelText) ? componentData.labelText : '占位输入框'">
            {{(componentData && componentData.labelText) ? componentData.labelText : '占位输入框'}}
        </label>
    </div>
    <ng-container *ngIf="!componentData.disabled;else disabledTpl">
        <div class="field-control" [ngClass]="{'has-form-error': getComponentError(componentData.identifyId)}"
            [zeprideAuthority]="zeprideAuthorityData" nz-tooltip [nzTooltipTitle]="componentData.extends.tooltip">
            <div class="full-width"
                [ngClass]="{'dashed': borderStyle == 'dashed', 'no-border':borderStyle == 'no', 'error-border': getComponentError(componentData.identifyId)}"
                *ngIf="componentData.extends&&componentData.extends.comType == 'txtArea'">
                <!-- <ckeditor [disabled]="componentData.readonly || !isAuthorized" [config]="editorConfig" #editor
                    [editor]="Editor" [ngModel]="txtContent" (ready)="onReady($event)" (change)="onChange($event)">
                </ckeditor> -->
                <ng-container *ngIf="componentData.extends.isWord;else tinyEditor">
                    <div class="edit-wrapper">
                        <div class="content-edit-container" #contentEdit
                            [contentEditable]="!(componentData.readonly || !isAuthorized)" (input)="onChange()">
                        </div>
                    </div>
                </ng-container>
                <ng-template #tinyEditor>
                    <editor apiKey="gwjtlivxyjyt1sm9o9zgcvprxpg2x1rnkhqpgl669jvhxnwj"
                        [disabled]="componentData.readonly || !isAuthorized" [(ngModel)]="txtContent" #editor
                        (onChange)="onChange($event)" [init]="options"></editor>
                </ng-template>
                <button nz-button nzSize="small" class="full-screen-btn" (click)="requestFullScreen()">
                    <i class="iconfont icon-fullscreen-line"></i>
                </button>
            </div>
            <input [disabled]="componentData.readonly || !isAuthorized" *ngIf="componentData.extends.comType == 'input'"
                [ngModel]="txtContent" (ngModelChange)="inputChange($event)" type="text" nz-input #txtArea
                class="border-ctrl border"
                [ngClass]="{'dashed': borderStyle == 'dashed', 'no-border':borderStyle == 'no'}">
            <span class="error-tip" [ngClass]="{'error-top-nolabel': componentData.extends?.noLabelTxt}"
                *ngIf="getComponentError(componentData.identifyId)">
                <ng-container *ngTemplateOutlet="errorTpl"></ng-container>
            </span>
        </div>
    </ng-container>

</div>
<ng-template #errorTpl>{{getErrorMsg(componentData.identifyId)}}</ng-template>

<ng-template #disabledTpl>
    <div class="field-control disabled-field" style="align-items:flex-start;" #disabledContent>
        <div [innerHTML]="txtContent"></div>
        <i *ngIf="dataChangeLog" class="iconfont icon-file-list-2-line icon-data-change" nz-popover
            [nzPopoverContent]="contentTemplate"></i>
    </div>
</ng-template>

<ng-template #contentTemplate>
    <div class="popover-content">
        <div>近期更正</div>
        <div>更正时间：{{dataChangeLog.time | date: 'yyyy年MM月dd日 HH:mm'}}</div>
        <div style="display: flex;">更正内容：由“<div class="font-red" [innerHTML]="dataChangeLog.sourceValue"></div>”更正为“<div
                class="font-bule" [innerHTML]="dataChangeLog.targetValue"></div>”
        </div>
    </div>

</ng-template>